import React from 'react';
import Expo, { AppLoading, Asset, Font } from 'expo';
import { FontAwesome, Ionicons,Entypo } from '@expo/vector-icons';
import { View, Image, Dimensions,Text } from 'react-native';
import { StackNavigator, pagesItems, } from 'react-navigation';

import NavigationService from './src/utils/NavigationService';


import Components from './src/pages/TabComponents';
import Detail from './src/pages/Detail';

const SCREEN_WIDTH = Dimensions.get('window').width;


const MainRoot = StackNavigator(
  {
    Components: {
      path: '/components',
      screen: Components,
    },
    Detail:{
      path: '/detail',
      screen: Detail,
      navigationOptions: ({navigation}) => ({
        headerLeft: (<Entypo name="chevron-thin-left" size={18} onPress={() => navigation.goBack()} />)
      }),
    }
    // Search: {
    //   path: '/search',
    //   screen: Search,
    // },
  },
  {
    initialRouteName: 'Components',
    contentOptions: {
      activeTintColor: '#548ff7',
      activeBackgroundColor: 'transparent',
      inactiveTintColor: '#ffffff',
      inactiveBackgroundColor: 'transparent',
      labelStyle: {
        fontSize: 15,
        marginLeft: 0,
      },
    },
  }
);

function cacheImages(images) {
  return images.map(image => {
    if (typeof image === 'string') {
      return Image.prefetch(image);
    } else {
      return Asset.fromModule(image).downloadAsync();
    }
  });
}

function cacheFonts(fonts) {
  return fonts.map(font => Font.loadAsync(font));
}

export default class AppContainer extends React.Component {
  state = {
    isReady: false,
  };

  async _loadAssetsAsync() {
    const imageAssets = cacheImages([
      require('./assets/images/bg_screen1.jpg'),
      require('./assets/images/bg_screen2.jpg'),
      require('./assets/images/bg_screen3.jpg'),
      require('./assets/images/bg_screen4.jpg'),
      require('./assets/images/user-cool.png'),
      require('./assets/images/user-hp.png'),
      require('./assets/images/user-student.png'),
      require('./assets/images/avatar1.jpg'),
    ]);

    const fontAssets = cacheFonts([FontAwesome.font, Ionicons.font]);

    await Promise.all([...imageAssets, ...fontAssets]);
  }

  render() {
    if (!this.state.isReady) {
      return (
        <AppLoading
          startAsync={this._loadAssetsAsync}
          onFinish={() => this.setState({ isReady: true })}
          // onError={console.warn}
        />
      );
    }

    return (
      <MainRoot ref={navigatorRef => {
        NavigationService.setTopLevelNavigator(navigatorRef);
      }} />
    );
  }
}

Expo.registerRootComponent(AppContainer);
